window.onload = function(){
    //获取容器对象
    var box = document.getElementById('container');
    //获取图片的对象集合
    var imgs = document.getElementsByTagName('img');
    //单张图片的宽度
    var imgWidth = imgs[0].offsetWidth;
    //设置图片暴露部分宽度
    var exposeWidth = 160;
    //设置container容器总宽度
    var boxWidth = imgWidth + (imgs.length-1)*exposeWidth;
    box.style.width = boxWidth + 'px';
    //设置每张图片的初始位置
    function setImgPosition(){
        for(var i = 1 ; i < imgs.length ; i++){
            imgs[i].style.left = imgWidth + exposeWidth*(i - 1) + 'px';
        }
    }
	function setImgsPos() {
		for (var i = 1, len = imgs.length; i < len; i++) {
			imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + 'px';
		}
	}
	setImgsPos();

	//计算每道门打开时应移动的距离
	var translate = imgWidth - exposeWidth;

	//为每道门绑定事件
	for (var i = 0, len = imgs.length; i < len; i++) {
		//使用立即调用的函数表答式，为了获得不同的i值
		(function(i) {
			imgs[i].onmouseover = function() {
				//先将每道门复位
				setImgsPos();
				//打开门
				for (var j = 1; j <= i; j++) {
					imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + 'px';
				}
			};
		})(i);
	}
};	